<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="count">父组件的值：{{count}}</div>
			<!-- 参数传递 -->
			<counter :count="count" msg="提示信息" :params="params" @count-add="countAdd"></counter>
		</div>
	</body>
</html>
<script>
	// 父组件给子组件传值
	// 父组件与子组件是单向数据流
	// 
	const counter = {
		// 参数接收
		props:{
			count:{
				// 校验数据类型
				type:Number,
				// 条件校验
				validator:function(val){
					return val < 100
				},
				// 设置传递参数的默认值
				default:20
			},
			msg:{
				type:String,
				// 参数不能为空
				required:true
			},
			params:{
				type:Object
			},
		},
		methods:{
			changeCount(){
				this.$emit('countAdd',20,30)
			}
		},
		template:`<div @click="changeCount">子组件计数器：{{count}}</div><div>提示：{{params}}</div>`
	}
	const app = Vue.createApp({
		components:{
			counter
		},
		data() {
			return{
				count:0,
				params:{
					name:'刘畅',
					age:'',
				}
			}
		},
		methods:{
			countAdd(num1,num2){
				console.log(num1,num2);
				this.count += 1;
			}
		}
	})
	const vm = app.mount("#app")
</script>